Cara Meredesign Template VioMagz Seperti Blog rianseo.com

Cara Meredesign Template VioMagz Seperti Blog rianseo.com
Bagikan :
Cara Meredesign Template VioMagz Seperti Blog rianseo.com

Sebenarnya saya kalau membahas masalah teknik mendesain tema blogger ini, lumayan males membuatkannya! Sebab saya yakin tidak semua orang yang membaca tulisan ini langsung bisa mempraktekan nya. Itulah alasan saya kenapa menunda berbagai request dari sahabat blogger yang minta buatkan post tentang cara meredesign template VioMagz.

Bahkan yang bikin saya geram, pertanyaan yang terlalu mudah bahkan sangat mudah jika seandainya dilakukan sendiri dengan cara belajar dan membaca! Salah satu alasan untuk orang indonesia adalah kemalesan dalam membaca.

Saya sendiri jujur, saya belajar membuat dan mendesain template itu hanya dapat dari ilmu membaca dan mempraktekan! Bukan dari belajar dari seorang guru.

Pokoknya saya lebih haus akan ilmu wawasan baru, bahkan saya lebih sering membaca dan meniru dari berbagai macam motivasi orang lain dalam menjalankan blog. Bukan dengan cara instan yang banyak tanya kaya kaum bani israel.

Cara Meredesign Template VioMagz


Cara Membuat Gambar Post Berada di Bagian Atas


Silahkan kamu salin kode CSS dibawah ini dan letakan di bagian atas kode </b:template-skin>
/* GAMBAR DALAM POSTINGAN */
.thumb-post {
    max-width:100%;
    height:auto;
    margin:0 auto;
    padding:10px 0;
    position:relative;
}
.thumb-post img {
    width:100%;
    max-width:100%;
    height:auto;
    max-height:450px;
    margin:0 0 -4px;
}
Lalu langkah selanjutnya salin juga kode HTML dibawah ini untuk kode pemanggil CSS tadi.
<b:if cond="data:blog.pageType == &quot;item&quot;">
<div class="thumb-post">
<b:if cond="data:blog.postImageUrl">
<img expr:alt="data:blog.pageName" expr:src="data:blog.postImageUrl" expr:title="data:blog.pageName" height="300" width="600" />
<b:else>
<img expr:alt="data:post.title" expr:title="data:post.title" height="300" src="https://3.bp.blogspot.com/-KYs7bNsL5eQ/V2d1Z0U4Y7I/AAAAAAAAm-Y/VPHnY95ua4ILVJDoP-FicZ8tPJpQpza5QCLcB/s600/no-thumbnail.jpg" width="600" />
</b:else></b:if>
  </div>
</b:if>
<div class="clear">
Cari kode <b:include data='post' name='postQuickEdit'/></div> ini dan letakan tempat dibagian bawah.

Salin kode Script jQuery pada kolom dibawah ini. Dan silahkan paste kodenya tempat di atas kode </body>
<script type='text/javascript'>
//<![CDATA[
    var disqus_shortname="http-www-rianseo-com-1";
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.staticaly.com/gh/rianseo/Megamenu/e345fe8d/flexible-post-6-1a.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
document.querySelectorAll(".separator")[0].style.display= "none";
function resizeThumbextralarge(e){for(var r=document.querySelectorAll(".thumb-post img"),t=0;t<r.length;t++)r[t].src=r[t].src.replace(/\/s1600/,"/s"+e),r[t].width=e,r[t].height=e}resizeThumbextralarge("600");
//]]>
</script>

Memasang Komentar Disqus di Template VioMagz versi Non-AMP


Silahkan kamu cari kode HTML <b:includable id='comments' var='post'> di bagian template dengan cara CTR+F dan masukan kode di bagian kolom pencarian.

Salin kode dibawah ini dan letakan di bawah kode </b:includable>
<b:includable id='disqus-comment' var='post'>
            <script type='text/javascript'>
                var disqus_blogger_current_url = &quot;<data:blog.canonicalUrl/>&quot;;
                if (!disqus_blogger_current_url.length) {
                    disqus_blogger_current_url = &quot;<data:blog.url/>&quot;;
                }
                var disqus_blogger_homepage_url = &quot;<data:blog.homepageUrl/>&quot;;
                var disqus_blogger_canonical_homepage_url = &quot;<data:blog.canonicalHomepageUrl/>&quot;;
            </script>
            </b:includable>
Jangan lupa ganti nama Disqus yang ada di bagian kode jQuery yang sudah kamu salin tadi sebelumnya yang saya beri warna merah " http-www-rianseo-com-1 ".

Cara Membuat Menu Footer 4 Kolom di Template VioMagz


Salin lagi kode CSS yang saya sediakan di kolom bawah ini. Seperti biasa letakan di bagian atas </b:template-skin>

/* FOOTER WIDGET */
#widget-footer-container {
	background: #262f3a;
	padding: 0 30px;
	overflow: hidden;
	line-height: 1.6em;
}
#widget-footer-wrapper {
	margin: 0 auto;
	max-width: 1000px;
	color: #fff;
}
#widget-footer-wrapper .widget {
	margin: 40px 0;
}
#widget-footer-wrapper .widget a {
	color: #ddd;
}
#widget-footer-wrapper .widget a:hover {
	color: #2ec4f2;
}
#widget-footer-wrapper .widget ul, #widget-footer-wrapper .widget ol {
	list-style: none;
	margin: 0 0;
}
#widget-footer-wrapper .widget ul li:before, #widget-footer-wrapper .widget ol li:before {
    display:none;
}
#widget-footer-wrapper .widget ul li, #widget-footer-wrapper .widget ol li {
	font-size: 14px;
    font-weight: 300;
    border: 0;
	margin: 0.3em 0;
}
#widget-footer-wrapper h2 {
	font-size: 15px;
	font-weight: 500;
	text-transform: uppercase;
	margin-bottom: 20px;
}
#widget-footer1 {
	width: 26%;
	float: left;
	padding-right: 20px;
	box-sizing: border-box;
}
#widget-footer2 {
	width: 26%;
	float: left;
}
#widget-footer3 {
	width: 26%;
	float: left;
	box-sizing: border-box;
}
#widget-footer4 {
	width: 22%;
	float: right;
	padding-left: 35px;
	box-sizing: border-box;
}
/* FOOTER */
#footer-container {
	background: #1d242e;
	padding: 20px 30px;
	overflow: hidden;
	color: #fff;
	font-size: 12px;
	text-align: center;
}
#footer-wrapper {
	max-width: 1000px;
	margin: 0 auto;
	overflow: hidden;
}
#footer-wrapper .footer-right {
	float: right;
}
#footer-wrapper .footer-left {
	float: left;
}
#footer-wrapper a {
	color: #fff;
}
#footer-wrapper a:hover {
	color: #ddd;
}
Lalu salin lagi kode HTML yang sudah saya kemas dikolom bagian bawah ini. Dan letakan kode HTML tersebut tepat dibagian bawah kode <!-- wrapper end --> <div class='sticky-stop'/>
<aside id='widget-footer-container' itemscope='itemscope' itemtype='http://schema.org/WPFooter' role='contentinfo'>
    <div id='widget-footer-wrapper'>
    <b:section class='widget-footer' id='widget-footer1' preferred='yes'>
      <b:widget id='LinkList1' locked='false' title='Hosting' type='LinkList'>
        <b:widget-settings>
          <b:widget-setting name='link-5'>https://www.rianseo.com/2018/08/auto-like-instagram-turki-2018.html</b:widget-setting>
          <b:widget-setting name='link-6'>https://www.youtube.com/c/RianSEO</b:widget-setting>
          <b:widget-setting name='link-3'>https://www.rianseo.com/2018/05/2-aplikasi-android-untuk-auto-like.html</b:widget-setting>
          <b:widget-setting name='link-4'>https://www.rianseo.com/2018/05/cara-bom-like-instagram-seseorang.html</b:widget-setting>
          <b:widget-setting name='text-1'>VPS Hosting</b:widget-setting>
          <b:widget-setting name='text-0'>Web Hosting</b:widget-setting>
          <b:widget-setting name='text-3'>Blogger Hosting</b:widget-setting>
          <b:widget-setting name='text-2'>Cloud Hosting</b:widget-setting>
          <b:widget-setting name='text-5'>Cheap Web Hosting</b:widget-setting>
          <b:widget-setting name='text-4'>Email Hosting</b:widget-setting>
          <b:widget-setting name='text-6'>Buy Hosting</b:widget-setting>
          <b:widget-setting name='shownum'>7</b:widget-setting>
          <b:widget-setting name='sorting'>NONE</b:widget-setting>
          <b:widget-setting name='link-1'>https://www.rianseo.com/2018/05/auto-liker-auto-follow-auto-instagram.html</b:widget-setting>
          <b:widget-setting name='link-2'>https://www.rianseo.com/2018/04/cara-membuat-auto-instagram-all-in-one.html</b:widget-setting>
          <b:widget-setting name='link-0'>https://www.rianseo.com/2018/10/cara-akses-hublaagram-2019.html</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>

<b:if cond='data:title != &quot;&quot;'><h2><data:title/></h2></b:if>
 <div class='widget-content'>
   <ul>
     <b:loop values='data:links' var='link'>
       <li><a expr:href='data:link.target'><data:link.name/></a></li>
     </b:loop>
   </ul>
   <b:include name='quickedit'/>
 </div>
</b:includable>
      </b:widget>
    </b:section>
    <b:section class='widget-footer' id='widget-footer2' preferred='yes'>
      <b:widget id='HTML2' locked='false' title='Domain' type='HTML'>
        <b:widget-settings>
          <b:widget-setting name='content'>&lt;ul&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Domain Cheker&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Domain Search&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Buy Domain&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Domain Transfer&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;XYZ Domain&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Cheap SSL Certificate&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Domain Name Search&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Free SSL Certificate&lt;/a&gt;&lt;/li&gt; 
&lt;/ul&gt;</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
      </b:widget>
    </b:section>
    <b:section class='widget-footer' id='widget-footer3' preferred='yes'>
      <b:widget id='HTML4' locked='false' title='Information' type='HTML'>
        <b:widget-settings>
          <b:widget-setting name='content'>&lt;ul&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Servers Status&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Affiliate Program&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Payment Methods&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Report Abuse&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Knowledge Base&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Tutorials&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Our Technology&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;https://www.blogger.com/follow.g?blogID=5880249218780566273&#39;&gt;Blog&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
      </b:widget>
    </b:section>
    <b:section class='widget-footer' id='widget-footer4' preferred='yes'>
      <b:widget id='HTML3' locked='false' title='Terhubung' type='HTML'>
        <b:widget-settings>
          <b:widget-setting name='content'>&lt;ul&gt;
  &lt;li&gt;&lt;a href=&#39;https://rian-seo.blogspot.com/2014/12/about-rian-seo.html&#39;&gt;About Us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Contact Us&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Advertisement&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Disclaimer&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Privacy&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Kerja Sama&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&#39;#&#39;&gt;Servers&lt;/a&gt;&lt;/li&gt;
&lt;li&gt;&lt;a href=&#39;https://www.blogger.com/follow.g?blogID=5880249218780566273&#39;&gt;Joint Us&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;</b:widget-setting>
        </b:widget-settings>
        <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
      </b:widget>
    </b:section>
    </div>
  </aside>
  <div class='clear'/>

Cara Menambah Kata-kata di Bagian Judul Blog


Maksudnya gimana sih ini mas? Kamu pernah gak? Lihat blog orang yang ada di beranda Google contohnya Rian SEO | Blogger Banua ada kata tambahan di bagian belakang.

Untuk lebih memperjelas, silahkan lihat gambar dibawah ini.

Cara Meredesign Template VioMagz Seperti Blog rianseo.com

Kamu hanya cukup mengedit bagian kode <title><data:blog.pageTitle/> | Kata Kunci </title> dan tambahkan kode | Kata kunci yang di inginkan.

Fungsinya apa? Lebih keren dan juga SEO Frendly

Kode lengkapnya
<title><data:blog.pageTitle/> | Information Instagram </title>
<b:elseif cond='data:blog.pageType in {&quot;item&quot;,&quot;static_page&quot;}'/>
	<title><data:blog.pageName/> | <data:blog.title/></title>
<b:elseif cond='data:blog.pageType in {&quot;index&quot;} and data:blog.pageName == &quot;&quot;'/>
	<title>

Penutup


Sampai disini saja untuk tutorial singkat cara meredesign tempate VioMagz yang mudah, jika ada dalam langkah mempraktekan mengalami eror silahkan kamu berikan pertanyaan lewat kolom komentar blog ini.

Untuk yang ingin merewite ulang artikel ini, harap untuk mencantumkan link sumber dari blog rianseo.com.

Jangan lupa untuk Berlangganan update artikel terbaru via email:

Previous article
Next article

10 Responses to "Cara Meredesign Template VioMagz Seperti Blog rianseo.com"

  1. saya pengen sekali template seperti mas rian.
    di tunggu jawabanya kirim e-mail juga boleh kehedna at gmail com

    ReplyDelete
    Replies
    1. Template ini namanya VioMagz mas, saya beli dari mas sugeng!

      Delete
    2. di mas sugeng vimagz yang biasa, ini mah bagus beda. lebih berwarna
      berapa mas kalo saya mau beli template mas rian?

      Delete
    3. Gak berani jual mas, karena gak di perbolehkan mas sugeng.

      Delete
  2. request cara buat sub menu didalam submenu template viomagz mas

    ReplyDelete
    Replies
    1. Yang kaya gimana mas?

      Delete
    2. yang kayak ditemplate mas ini, di submenunya ada menu lagi ( yg ada tulisan new itu)

      Delete
    3. Owh itu, nanti saya buatkan tutorialnya!

      Delete
    4. sip ditunggu gan

      Delete
  3. halo Mas Rian, saya menggunakan template ini pada blog saya, tetai iklan yang saya pasang terpotong ketika dibuka melalui smartphone. Mohon bantuannya, terima kasih banyaak.

    ReplyDelete

Note :
- Di larang pasang link aktif di kolom komentar
- Komentar akan disetujui jika tidak mengandung promosi
- Komentar boleh menggunakan bahasa banjarmasin
- Dilarang komentar yang berisi pornografi
- Jangan harap komentar yang berisi link aktif akan disetujui

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel